<template>
  <div class="swiper">
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item v-for="(image, index) in swiperList" :key="index">
        <img :src="image.picUrl" />
      </van-swipe-item>
    </van-swipe>

    <!-- 网易自营 -->
    <van-row justify="center" class="common">
      <van-col span="7" v-for="item in wangyiList" :key="item.desc">
        <img :src="item.icon" alt="" />
        <span>{{ item.desc }}</span>
      </van-col>
    </van-row>

    <!-- 列表 -->
    <div class="list common">
      <ul>
        <li v-for="item in cateList" :key="item.picUrl">
          <img :src="item.picUrl" alt="" /><span>{{ item.text }}</span>
          <!-- {{ newPersonList[0] }} -->
        </li>
      </ul>
    </div>

    <!-- 新人专享礼 -->
    <div class="newperson top" v-if="newPersonList.length">
      <!-- 标题 -->
      <div class="title">新人专享礼</div>

      <div class="imglist common">
        <div class="left"><img :src="newPersonList[0].showPicUrl" alt="" /></div>
        <div class="right">
          <img :src="newPersonList[1].showPicUrl" alt="" /><img
            :src="newPersonList[1].showPicUrl"
            alt=""
          />
        </div>
      </div>
    </div>

    <!-- 类目热销榜 -->
    <div class="hot">
      <p class="title">类目热销榜</p>
      <div class="hotTop">
        <!-- top -->
        <div class="hotTopList">
          <div
            class="hotTopListitem"
            style="margin-right: 10px"
            v-for="(item, index) in hotList.slice(0, 2)"
            :key="index"
          >
            <span>{{ item.categoryName }}</span>
            <img :src="item.picUrl" alt="" />
          </div>
        </div>
      </div>
      <!-- bottom -->
      <div class="hotButtom">
        <ul>
          <li v-for="(item, index) in hotList.slice(2)" :key="index">
            <span>{{ item.categoryName }}</span
            ><img :src="item.picUrl" alt="" />
          </li>
        </ul>
      </div>
    </div>

    <!-- 为你精选 -->
    <!-- 列表 -->
    <div v-if="rcomForYou">
      <div class="Listtitle">
        <h6>为你推荐</h6>
      </div>
      <ul class="otherList" @click="goGoodsDetail">
        <li class="otherListItem" v-for="item in rcomForYou">
          <img :src="item.listPicUrl" alt="" />
          <div class="content">
            <p class="title">{{ item.name }}</p>
            <p class="price">
              <span class="one"
                >到手价格￥<b>{{ item.finalPriceInfoVO.priceInfo.basicPrice }}</b></span
              >
              <span class="two">￥{{ item.finalPriceInfoVO.priceInfo.counterPrice }}</span>
            </p>
            <p v-if="item.finalPriceInfoVO.banner" class="time">
              <span>{{ item.finalPriceInfoVO.banner.title }}</span>
              <span>{{ item.finalPriceInfoVO.banner.content }}</span>
            </p>
          </div>
        </li>
      </ul>
    </div>
    <!-- {{ newArr }} -->
  </div>
</template>

<script lang="ts" setup>
import { reqForYou, reqRecomList } from '@/api/home'
import { onMounted, ref } from 'vue'
import {
  ICategoryList,
  IKingKongList,
  IndexActivityModule,
  PolicyDescList,
  FocusList
} from '@/types/home'
import { useRouter } from 'vue-router'
const router = useRouter()

// 点击为你推荐去商品详情
const goGoodsDetail = async () => {
  // 跳转到详情购买页
  router.push({
    path: '/home/detail'
  })
}

//#region 以下都是首页的数据收集除开为你推荐
// 轮播图
const swiperList = ref<FocusList[]>([])
// 网易自营品牌
const wangyiList = ref<PolicyDescList[]>([])
// 分类
const cateList = ref<IKingKongList[]>([])
// 新人专享
const newPersonList = ref<IndexActivityModule[]>([])
// 类目热销榜
const hotList = ref<ICategoryList[]>([])
// 为你推荐
const rcomForYou = ref()

// 商品列表
// const goodsList=ref([])

// 获取推荐数据
const getRecommData = async () => {
  const res = await reqRecomList()
  //  console.log(res);
  const { categoryHotSellModule, kingKongModule, policyDescList, indexActivityModule, focusList } =
    res.data.data
  if (res.code === '200') {
    //  console.log(res);
    // 轮播图
    swiperList.value = focusList
    // 网易自营品牌
    wangyiList.value = policyDescList
    // 分类
    cateList.value = kingKongModule.kingKongList
    // 新人专享
    newPersonList.value = indexActivityModule
    //类目热销
    hotList.value = categoryHotSellModule.categoryList
  }
}

// 为你推荐
const getForyou = async () => {
  const res = await reqForYou({ itemIdsStr: '', size: 20 })
  // console.log(res)
  rcomForYou.value = res.data.itemList

  // if (res.code === 200) {
  //   console.log(res)

  //   // 为你推荐数据
  // }
}
//#endregion

// 获取商品列表
// const getGoodsList=async ()=>{
// const res= await reqGoodsList()
// if(res.code==='200'){
// // goodsList.value=res.
// console.log(res);

// }
// }

// // 获取某个频道
// const getOtherList=async ()=>{
//  const res= await reqOtherList()
//  console.log(res);

// }

// const newArr=computed(()=>{
//   const arr=[]
//   // const arr1=[1,2,3,4,5]
// while(hotList.value.length>0){
//   arr.push(hotList.value.splice(0,2))
// }
// return arr
// })
onMounted(async () => {
  getRecommData()
  //  为你推荐
  getForyou()
})
</script>

<script lang="ts">
export default {
  name: 'VRecommend'
}
</script>

<style lang="scss" scoped>
// 轮播图
.van-swipe {
  width: 100%;
  height: 180px;
  .van-swipe-item {
    img {
      width: 100%;
      // height: 100%;
    }
  }
}

// 网易自营
.van-row {
  .van-col {
    font-size: 12px;
    img {
      margin-top: 10px;
      width: 20px;
      height: 20px;
    }
  }
}

// 列表
.list {
  ul {
    display: flex;
    font-size: 14px;
    justify-content: space-between;
    flex-wrap: wrap;
    li {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 70px;
      img {
        width: 50px;
        height: 50px;
      }
    }
  }
}

// 新人专享
.newperson {
  height: 250px;
  // background-color: gold;
  .title {
    text-align: center;
    font-size: 16px;
    margin-bottom: 10px;
  }
  .imglist {
    display: flex;
    img {
      width: 180px;
      height: 200px;
    }
    .right {
      img {
        height: 100px;
      }
    }
  }
}

// 类目热销榜单
.hot {
  .title {
    font-size: 16px;
    margin-bottom: 10px;
  }
  .hotTopList {
    display: flex;
    justify-content: center;
    .hotTopListitem {
      width: 50%;
      // margin-left: 5px;
      font-size: 14px;
      // margin: auto;
      // background-color: aqua;
      background-color: #eee;
      border-radius: 10px;

      img {
        width: 100px;
      }
    }
  }
  .hotButtom {
    margin-top: 10px;
    ul {
      display: flex;
      flex-wrap: wrap;
      font-size: 14px;
      img {
        width: 80px;
        height: 60px;
      }
      li {
        border-radius: 10px;
        margin-bottom: 10px;
        background-color: #eee;
        margin-left: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
      }
    }
  }
}

// 为你精选
.Listtitle {
  h6 {
  }
}
.otherList {
  width: 100%;
  flex-wrap: wrap;
  display: flex;
  justify-content: space-around;
  .otherListItem {
    margin-bottom: 10px;
  }

  li {
    width: 45%;
    img {
      width: 100%;
      border-radius: 5%;
    }
  }
  .content p {
    margin: 3px;
    font-size: 14px;
  }
  .content .price {
    color: red;
    font-size: 13px;
    .one {
      font-weight: bold;
      b {
        font-size: 19px;
      }
    }
    .two {
      color: #898686;
      font-size: 10px;
      text-decoration: line-through;
    }
  }
  .content .time {
    width: 150px;
    height: 20px;
    // border: 1px solid #000;
    border-radius: 25px;
    // text-align: center;
    line-height: 20px;
    background-color: rgb(242, 199, 199);
    span {
      &:first-child {
        background-color: red;
        font-size: 14px;
        font-weight: bold;
        color: white;
        width: 50px;
        // border: 1px solid #000;
        border-radius: 10px;
      }
    }
  }
}
.Listtitle {
  .twoTitle {
    margin-top: 5px;
    font-size: 14px;
    color: #d3c9c9;
  }
}
</style>
